<template>
  <div class="comp-asset-drop">
    <div class="header" @click="toggle($event)">
      <div class="drop-item">
        <!-- <span class="img" :class="'coin-' + coinType.toLowerCase()"></span> -->
        <img
          v-for="(item,key) in imgList"
          v-if="coinType==key&&key!='USDT'"
          :src="item"
          width="32px"
          style="margin-right:10px"
        />
        <img
          v-for="(item,key) in imgList"
          v-if="coinType==key&&key=='USDT'&&item"
          :src="item"
          width="32px"
          style="margin-right:10px"
        />
        <img
          v-for="(item,key) in imgList"
          v-if="coinType==key&&key=='USDT'&&!item"
          src="/img/usdt@2x.png"
          width="32px"
          style="margin-right:10px"
        />
        <span class="text">{{coinType}}</span>
        <i class="icon-allow-down" :class="{'icon-allow-down--up':show}"></i>
      </div>
    </div>
    <div class="body" v-if="show">
      <ul class="list">
        <li
          class="list-item drop-item"
          v-for="(item,key) in imgList"
          :key="key"
          @click="changeCoin(key)"
          :class="{'list-item--active':key === coinType,'coin-act':coinType === key}"
        >
          <img v-if="key!='USDT'" style="margin-right:10px" width="32px" :src="item" />
          <img v-if="(key=='USDT'&&item)" style="margin-right:10px" width="32px" :src="item" alt />
          <img v-if="(key=='USDT'&&!item)" style="margin-right:10px" width="32px" src="/img/usdt@2x.png" alt />
          <span class="text">{{key}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script type="text/babel">
import commonService from "../../../common/commonService";
export default {
  components: {},
  data() {
    return {
      show: false,
      imgList: {}
    };
  },
  props: {
    coin: {
      default: ""
    },
    coinList: {
      default: []
    },
    onSuccess: {
      default: function(val) {}
    }
  },
  computed: {
    coinType: function() {
      return this.coin;
    }
  },
  created() {
    $.map(this.coinList, (item, key) => {
      let data = {
        symbol: item
      };
      commonService.fundList(data).done(rep => {
        if (rep.data) {
          Vue.set(this.imgList,item,rep.data.icon_root + rep.data.icon)
          console.log(rep.data)
        } else {
           Vue.set(this.imgList,item,'')
        }
      });
    });
  },
  mounted() {
    $(document).on("click", e => {
      if (this.show === true) {
        this.show = false;
      }
    });
  },

  methods: {
    changeCoin(coinType) {
      this.coinType = coinType;
      this.onSuccess(coinType);
      this.show = false;
    },

    toggle($event) {
      $event.stopPropagation();
      if (this.show === true) {
        this.show = false;
      } else {
        this.show = true;
      }
    }
  }
};
</script>

<style lang="sass" rel="stylesheet/scss">
    .comp-asset-drop {
        position: relative;
        display: inline-block;
        z-index: 2;
        .header{
            width: 120px;
            padding-right: 16px;
            border-right: 1px solid #f2f2f2;
        }
        .body{
            position: absolute;
            background-color: #fff;
            width: 652px;
            max-height: 320px;
            overflow-y: scroll;

            box-shadow: 0 0 6px 4px #f8f8f8;
            border-radius: 6px;

        }
        .drop-item{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 32px;
            cursor: pointer;
            border: 1px #fff solid;
            >.img{
                margin-right: 10px;
                display: inline-block;
                width: 32px;
                height: 32px;
                background-image: url('../../../img/dfp.png');
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                @each $coin in btc,all,apa, eth,cfc,dabt,mae,moac,mskc,ntcc,swtc,tcc,wkt,udc, ltc, act, smc, let, omg, eos, btm, tv, usc,ogc,
                        bcd,bch,bchc,bta,btd,btg,lbtc,sbtc,abtc,bck,btp,yoyow,trx,cbtc,bcx,ssc,emo,etf,etg,bth,sltc,lts,aac,kcash,btf,lch ,usdt,smcf1,vca,hmc,
                        gto, wtc, storj, salt, topc, appc ,aec,iep,noa,gbk,aos,pdtc,call,vollar,cfc,crl,dusd{
                    &.coin-#{$coin} {
                        background-image: url('../../../img/#{$coin}@2x.png');
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: contain;
                    }
                }
            }

            >.text{
                display: inline-block;
                min-width: 48px;
                text-align: left;
            }
        }

        .list{
            padding: 24px 16px;
            display: flex;
            flex-wrap: wrap;
            &-item{
                flex: 0 0 120px;
                width: 120px;
                text-align: center;
                border: 1px #fff solid;
                border-radius: 22px;
                transition: all 0.4s ease;
                &:hover {
                    border: 1px #f2f2f2 solid;
                }
                &--active{
                    border: 1px #f2f2f2 solid;
                    background-color: #f2f2f2;
                    border-radius: 22px;
                }
            }
        }


        .icon-allow-down{
            transition: all 0.4s ease;
            &--up{
                transform: rotate(180DEG);
            }
            font-size: 18px;
            transform-origin: 50% 47%;
        }




        // 滚动条样式
        ::-webkit-scrollbar {
            background-color: #fff;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #fff;
            border: 1px solid #eee;
        }
    }
</style>